<template>
<div class="header">
	<div class="header-left"><span class="iconfont">&#xe624;</span></div>
	<div class="header-input">
		<span class="iconfont">&#xe632;</span>输入城市景点游玩主题
	</div>
	<router-link to="/city">
		<div class="header-right">{{this.$store.state.city}}<span class="iconfont arrow-icon">&#xe6aa;</span></div>
	</router-link>
	
</div>
  
</template>

<script>
export default {
  name: 'homeHeader',
	props: {
		city: String
	}
}
</script>

<style scoped lang="stylus">
	@import '~styles/varibles.styl'
	
	.header
		display flex
		height $headerHeight
		background $bgColor
		line-height $headerHeight
		color #fff
		.header-left
			width 0.64rem
			float left
			text-align center 
		.header-input
			flex 1
			background #fff
			border-radius 0.1rem
			margin-top .12rem
			height 0.64rem
			line-height 0.64rem
			margin-left .2rem
			color #ccc
			padding-left .2rem
		.header-right 
			width 1.24rem
			float right
			text-align center
			color #fff
			.arrow-icon
				font-size .24rem
				margin-left 0.1rem
	
</style>
